<template>
  <div class="singUp-container">
    <van-pull-refresh :disabled="refreshDisabled" v-model="isLoading" @refresh="onRefresh" pulling-text="加载中..."
      loosing-text="加载中..." loading-text="loading">
      <div class="list-group" ref="scrollbars" @scroll="scrollbarTop">
        <van-list loading-text="加载中" v-model="loading" :finished="finished"
          :finished-text="listData.length > 0 ? '没有更多了' : ''" @load="initAjaxMethod">
          <div class="match-content" v-for="(item, index) in listData" :key="index" @click="goToDetail(item)">
            <div class="match-content-list">
              <div class="content-img-group-mobile">
                <div style="position: relative;" class="content-img-group">
                  <img :src="baseUrl + item.active_log" class="content-img">
                </div>
              </div>
              <div class="detail-mobile">
                <div class="detail-tags">
                  <van-tag type="primary" v-if="item.status == 1">已提交</van-tag>
                  <van-tag type="warning" v-if="item.status == 0">未提交</van-tag>
                </div>
                <div class="detail-title detail-title-mobile">{{ item.active_title }}</div>
                <div class="detail-content-mobile ellipsis-multiline">{{ item.content }}</div>
                <div class="detail-info">
                  <van-icon name="underway-o" size="0.28rem" />
                  <span style="margin-left:0.1rem;">{{ item.time_st | dateFrom }}至{{ item.time_ed | dateFrom }}</span>
                </div>
                <div class="detail-info" v-if="item.status == 1 && item.avg_scoring">
                  <van-icon name="discount-o" size="0.28rem" />
                  <span style="margin-left:0.1rem;">平均分：{{ item.avg_scoring ? Number(item.avg_scoring).toFixed(1) : 0
                    }}</span>
                </div>
                <div class="detail-info" v-if="userRole == 2">
                  <van-icon name="label-o" size="0.28rem" />
                  <span style="margin-left:0.1rem;">作品名：{{ item.name }}</span>
                </div>
                <div class="detail-info" v-if="userRole == 2">
                  <van-icon name="manager-o" size="0.28rem" />
                  <span style="margin-left:0.1rem;">提交人：{{ item.nickname }}</span>
                </div>
              </div>
            </div>
            <div class="bottom-button">
              <van-button type="info" @click.stop="getWords(item, 3)" v-if="item.status == 1">查看作品</van-button>
              <van-button type="info" @click.stop="getWords(item, 2)"
                v-if="item.status == 0 && userRole == 1">上传作品</van-button>
              <van-button type="info" @click.stop="getScoring(item)" v-if="item.status == 1 && item.avg_scoring"
                style="margin-left:0.3rem;">查看评分</van-button>
              <van-button type="danger" style="margin-left:0.3rem;" @click.stop="worksDel(item.id)"
                v-if="userRole == 1">取消参赛</van-button>
            </div>
          </div>
        </van-list>
        <not-find v-if="listData.length == 0"></not-find>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import notFind from "@/view/common/notFind";
import { getdate, getUserRole } from "@/utils/utils";
import { PullRefresh, List, Toast, Icon, Button, Tag } from 'vant';
export default {
  name: "match",
  components: {
    notFind, [PullRefresh.name]: PullRefresh, [List.name]: List, [Icon.name]: Icon, [Button.name]: Button, [Tag.name]: Tag
  },
  data() {
    return {
      refreshDisabled: false,
      loading: false,
      userRole: getUserRole(),
      finished: true,
      isLoading: false,
      wxReadyOk: false,
      menuId: 3,
      baseUrl: this.$API.ASSET_IMAGES_URL,
      query: {
        pageIndex: 1,
        pageSize: 10,
      },
      total: 0,
      listData: [],
    };
  },
  filters: {
    dateFrom(e) {
      if (!e) return '';
      return getdate(e);
    }
  },
  mounted() {
    this.initAjaxMethod();
  },
  methods: {
    scrollbarTop(e) {
      this.scrollTop = e.target.scrollTop;
      if (this.scrollTop > 100) {
        this.refreshDisabled = true;
      } else {
        this.refreshDisabled = false;
      }
    },
    onRefresh() {
      this.isLoading = true;
      this.query.pageIndex = 1;
      this.listData = [];
      this.finished = false;
      this.loading = true;
      this.$refs['scrollbars'].scrollTop = 0;
      this.initAjaxMethod();
    },
    goToDetail(data) {
      this.$router.push({ path: '/matchDetail', query: { id: data.id } });
    },
    //列表加载
    initAjaxMethod() {
      Toast.loading({ message: "加载中...", forbidClick: true });
      this.$http
        .post(this.$API.USER_SINGUP_LIST, {
          page: this.query.pageIndex,
          pageSize: this.query.pageSize
        })
        .then((res) => {
          Toast.clear();
          if (res.code == 1) {
            let list = Array.isArray(res.data.list) ? res.data.list : [];
            let isOver = list.length < this.query.pageSize ? true : false;
            this.finished = isOver;
            this.loading = false;
            this.isLoading = false;
            this.listData = this.query.pageIndex == 1 ? list : [...this.listData, ...list];
            this.total = res.data.total;
            if (!isOver) {
              this.query.pageIndex++;
            }
          }
        });
    },
    worksDel(id) {
      this.$dialog.confirm({
        title: '提示',
        message: '确定要进行此操作',
      }).then(() => {
        this.worksDelMethod(id);
      }).catch(() => { });
    },
    worksDelMethod(id) {
      Toast.loading({ message: "加载中...", forbidClick: true });
      this.$http
        .post(this.$API.USER_SIGNUP_DEL, { signup_id: id })
        .then((res) => {
          Toast.clear();
          if (res.code == 1) {
            this.$notify({ type: 'success', message: '操作成功' });
            this.initAjaxMethod();
          } else {
            this.$notify({ type: 'warning', message: res.msg });
          }
        });
    },
    getWords(item, flag) {
      this.$router.push({ path: '/matchSubmit', query: { activeId: item.active_id, signupId: item.id, type: flag == 2 ? 1 : 2,memberId:item.member_id} });
    },
    getScoring(item) {
      this.$router.push({ path: '/evaluate', query: { signupId: item.id } });
    },
  }
};
</script>
<style lang="less">
.singUp-container {
  height: 100%;

  .list-group {
    height: 100%;
    padding: 0 0.2rem;
  }

  .detail-tags {
    display: flex;
    justify-content: flex-end;

    .van-tag {
      font-size: 0.24rem;
      padding: 0.1rem 0.3rem;
      border-radius: 4px;
      line-height: 0.24rem;
    }
  }

  .match-content {
    padding: 0.2rem;
    color: #3e3a39;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    margin-top: 0.2rem;
    cursor: pointer;
    border-radius: 0.2rem;

    .match-content-list {
      display: flex;
      align-items: center;
    }

    .content-img-group-mobile {
      position: relative;
      align-items: center;
      justify-content: center;

      .content-img-group {
        width: 2rem;
        height: 2rem;
        background: #fff;

        .content-img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .detail-content-mobile {
      font-size: 0.24rem;
      color: #3e3a39;
      padding-top: 0.08rem;
    }

    .detail-mobile {
      width: 60%;
      padding-left: 0.3rem;
      flex-grow: 1;
    }

    .detail-title {
      font-size: 0.28rem;
      color: #333;
      font-weight: bold;
    }

    .detail-info {
      display: flex;
      align-items: center;
      padding-top: 0.16rem;

      span {
        font-size: 0.24rem;
        color: #3e3a39;
      }
    }
  }

  .bottom-button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 0.2rem;
  }
}
</style>